import { Button as AntdButton, ConfigProvider } from 'antd';
import classNames from 'classnames';
import React from 'react';
import themeConfig from './../../theme/themeConfig';
import './styles/index.less';
import { ButtonProps } from './interface';

/** 按钮组件 */
const Button: React.FC<ButtonProps> = (props) => {
  const { className, children, hoverEffect = false, antNative = false, ...restProps } = props;

  // 如果使用原生模式，直接返回antd按钮
  if (antNative) {
    return <AntdButton className={className} {...restProps}>{children}</AntdButton>;
  }

  const buttonClassName = classNames(
    'ant-btn',
    {
      'ant-btn-hover-transform': hoverEffect,
    },
    className,
  );

  return (
    <ConfigProvider theme={themeConfig}>
      <AntdButton className={buttonClassName} {...restProps}>
        {children}
      </AntdButton>
    </ConfigProvider>
  );
};

export type { ButtonProps };
export default Button
